<!-- 项目详情 -->
<template>
  <div>
    <div class="projectHeader">
      <van-row>
        <van-col span="12" class="tac">
          <p style="font-size:.34rem;">预计收益</p>
          <p class="red">{{common.formatAmount(projectData.expectIncomeAmt,2)}}</p>
        </van-col>
        <van-col span="12" class="tac">
          <p style="font-size:.34rem;">累计收益</p>
          <p class="red">{{common.formatAmount(projectData.totalIncomeAmt,2)}}</p>
        </van-col>
      </van-row>
      <!-- <p style="font-size:.34rem;">累计收益</p>
			<p>100%</p> -->
    </div>
    <van-row class="detail">
      <van-col span="16" class="tac">
        <span>我的贡献分 <span class="red">{{projectData.myMark}}</span></span>
      </van-col>
      <van-col span="8" class="tac">
        <button class="button_list" @click="goto">贡献明细</button>
      </van-col>
    </van-row>
    <!-- <div class="project">
			<p>项目列表</p>
		</div> -->
    <div>
      <!-- <img src="../../assets/images/banner.png" width="100%" style="height: 4rem;" alt=""> -->
      <div class="contentMsg">
        <div class="byTime">
          <span :class="projectData.status=='2'?'red':'green'">{{projectData.statusName}}</span> 截止时间 {{common.formatD(projectData.dueTime)}}
        </div>
        <div class="contentText">
          <van-row>
            <van-col span="23" offset="1" class="tal">
              <span class="font38">{{projectData.name}}</span>
            </van-col>
          </van-row>
          <van-row class="pt3">
            <van-col span="12" class="tac">
              <p><span class="red">{{common.formatAmount(projectData.minAmt)}}</span> USDT</p>
              <p class="font28">起投金额</p>
            </van-col>
            <van-col span="12" class="tac">
              <p class="red">{{projectData.term}} {{projectData.termUnitName}}</p>
              <p class="font28">投资期限</p>
            </van-col>
          </van-row>
          <van-row class="progress">
            <van-progress :percentage="percentage" :color="projectData.status=='2'?'#4caf50':'#e8bb57'" stroke-width="14" />
          </van-row>
          <van-row class="pt3">
            <van-col span="12" class="tac">
              <span>完成{{percentage}}%</span>
            </van-col>
            <van-col span="12" class="tac">
              <span>项目金额<span class="red">{{common.formatAmount(projectData.totalAmt)}}</span>USDT</span>
            </van-col>
          </van-row>
          <van-row class="pt3">
            <van-col span="24" class="tac">
              <h2>贡献总和 <span class="red">{{projectData.totalMark}}</span></h2>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
    <div class="project" style="margin-top:.2rem;margin-bottom:55px;">
      <p class="title">项目介绍</p>
      <p class="projectCon">
        {{projectData.content}}
      </p>
    </div>
    <div class="footer" v-if="type!='' && projectData.status=='1'">
      <button @click="show = true">投资</button>
    </div>
    <van-popup v-model="show" closeable position="bottom" :close-on-click-overlay="false" @close="showPoup">
      <div class="project_content">
        <van-row>
          <van-col span="24" class="tac">
            <p class="red">{{common.formatAmount(canCarry,2)}}</p>
            <p>可用余额(USDT)</p>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="24" class="tac">
            <input type="number" class="vanInput" v-model="data.amt" placeholder="请输入金额">
          </van-col>
        </van-row>
        <van-row>
          <!-- <van-col span="12"  class="tal">
						<van-button type="default"  style="width:90%;height:40px;" @click="showPoup">关闭</van-button>
					</van-col> -->
          <van-col span="24" class="tar">
            <van-button type="info" :loading="loading" loading-text="加载中..." style="height:40px;" @click="investment">投资</van-button>
          </van-col>
        </van-row>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data () {
    return {
      projectData: {},
      percentage: 0,
      type: this.$route.query.type,
      show: false,
      canCarry: '',
      data: {
        projectId: this.$route.query.id,//项目id
        amt: '',//投资金额
      },
      loading: false,
      id: JSON.parse(localStorage.getItem('userInfo')).id,
    }
  },
  methods: {
    //关闭弹窗
    showPoup () {
      this.show = false
      this.data.amt = ''
    },
    //投资
    async investment () {
      if (this.data.amt == '') {
        this.$notify({ type: 'warning', message: '投资金额不能为空' });
        return;
      }
      if (this.data.amt < 0) {
        this.$notify({ type: 'warning', message: '投资金额不能为负数' });
        return;
      }
      this.loading = true
      const url = '/payment/save'
      let result = await this.request.mobileRequest('POST', url, this.data)
      if (result.code == 200) {
        this.$notify({ type: 'success', message: result.msg });
        this.show = false,
          this.data.amt = ''
        this.userDetail();
        this.loading = false
      } else {
        this.loading = false
        this.$notify({ type: 'warning', message: result.msg });
      }
    },
    async getDetail () {
      let id = this.$route.query.id
      const url = `/project/get/${id}`
      let result = await this.request.mobileRequest('GET', url)
      if (result.code == 200) {
        this.projectData = result.data
        this.percentage = Number((this.projectData.availableAmt / this.projectData.totalAmt * 100).toFixed(0))
      } else {
        this.$notify({ type: 'warning', message: result.msg });
      }
    },
    //获取用户信息
    async userDetail () {
      const url = `/member/get/${this.id}`
      let result = await this.request.mobileRequest('GET', url)
      if (result.code == 200) {
        this.canCarry = result.data.balanceAmt
        localStorage.setItem('userData', JSON.stringify(this.userData))
      } else {
        this.$notify({ type: 'warning', message: result.msg });
      }
    },
    goto () {
      this.$router.push(`/contribution?id=${this.projectData.id}`)
    }
  },
  mounted () {
    this.getDetail();
    this.userDetail();
  }
}
</script>

<style scoped>
.vanInput {
  border: 0.015rem solid #d9d9d9;
  width: 100%;
  height: 0.8rem;
  padding-left: 0.3rem;
  box-sizing: border-box;
  border-radius: 0.1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.project_content {
  padding: 0.3rem 0.5rem;
  overflow: auto;
}
.tac p {
  line-height: 0.8rem;
}
.detail {
  background: #fff;
  margin-bottom: 0.2rem;
  font-size: 0.38rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1rem;
}
.projectHeader {
  height: 3rem;
  display: flex;
  justify-content: center;
  background-color: #e8bb57 !important;
  flex-direction: column;
}
.projectHeader p {
  color: #333;
  line-height: 0.75rem;
  font-size: 0.55rem;
}
.van-col h2 {
  padding-top: 0.1rem;
  font-size: 0.45rem;
}
.van-col p {
  font-size: 0.38rem;
  line-height: 0.4rem;
  margin-top: 0.2rem;
}
.van-col button {
}
.title {
  font-size: 0.4rem;
}
.projectCon {
  line-height: 0.65rem;
  padding-top: 0.3rem;
  text-indent: 32px;
}
.button_list {
  border: none;
  background: #ff5722;
  padding: 0.1rem 0.3rem;
  font-size: 0.24rem;
  color: #fff;
  border-radius: 5px;
  outline: none;
}
.footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  box-sizing: border-box;
  background: #fff;
  border-top: 0.01rem solid #d9d9d9;
  height: 50px;
  line-height: 50px;
  padding: 0rem 0.4rem;
}
.footer button {
  background: #e8bb57;
  border: none;
  width: 100%;
  height: 35px;
  line-height: 35px;
  border-radius: 5px;
  color: #fff;
  font-size: 0.34rem;
}
</style>
